@import "partials/custom-variables"
@import "partials/font"
@import "partials/mixin"
@import "partials/responsive"
@import "compass/"
@import "../img/social/*.png"
@include all-social-sprites
@import "compass/layout/stretching"
@import "compass/utilities"
@import "compass/css3"


body
	font-family: $primary-font
	font-size: $primary-font-size
	line-height: $primary-font-size + 10
	color: $primar-font-color

.sub-header
	padding: 83px 108px
	margin-top: 20px
	margin-bottom: 50px
	//background: $sub-header-bg-color
	//background-color: mix(red,green, 50%)
	//background-color: invert(#f4f4f4)
	background-color: opacify(#455555,.1)
	//background: url("../img/mac1.jpg")
	color: $white-color
	transition: background 1s

	&:hover 
		background: darken($sub-header-bg-color,10%)
	& h1
		font-size: 50px	

	& p
		width: 60%

.navbar-brand
	font-size: 35px
	+text-shadow-mx(2px, 2px, 2px, #000000)
	&:hover
		color: #ffffff !important


.top-menu
	float: right

.mylist
	@include pretty-bullets("star.png")
.columns
	@include column-count(2)
	@include column-width(100px)
	@include column-gap(20px)
	@include column-rule(2px,dashed,#ff0000)

.example
	$btn-bg-color: #455555
	width: 200px
	height: 100px